<template>
    <div class="login-wrap">
        <div class="login-box">
            <div style="font-size: 36px;margin-bottom: 20px;">登录</div>
            <div style="width: 70%;">
                <bk-form :label-width="0" :model="formData">
                    <bk-form-item label="" :required="true" :property="'username'">
                        <bk-input v-model="formData.username" :placeholder="'请输入手机号'"></bk-input>
                    </bk-form-item>
                    <bk-form-item label="" :required="true" :property="'password'">
                        <bk-input v-model="formData.password" :type="'password'" :placeholder="'请输入密码'"></bk-input>
                    </bk-form-item>
                    <div style="margin-top: 30px;">
                        <bk-button :theme="'primary'" type="submit" :title="'登录'" @click="handleClick" class="mr10"
                            style="width: 100%;">
                            登录
                        </bk-button>
                    </div>
                </bk-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'login',
        data: function() {
            return {
                formData: {username: '', password: ''}
            }
        },
        methods: {
            handleClick() {
                this.$api.Task.login(this.formData).then((res) => {
                    this.setCookie('AUTHORIZATION', 'jwt ' + res.token)
                    this.$router.push({name: 'home'})
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
    display: flex;
    justify-content: center;
}

.login-box {
    width: 500px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
